<template>
    <div class="huoti">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Liveness detection
            </div>
        </div>
        <div class="main">
            <h2>Please record a video of three seconds and blinking your eyes</h2>
            <div class="video-div">
                <video ref="videoPlayer" autoplay class="video" width="640" height="480" style="object-fit: cover"
                    playsinline></video>
            </div>
            <br>
            <div class="timer" v-if="isShow">{{ num }}</div>
            <van-button class="start" type="primary" @click="startRecording" v-if="!isShow">Start
                Recording</van-button>
        </div>
    </div>
</template>
<script>
import { jiami, jiemi } from "../../utils/aeskey.js";
import { huotijiaoyan } from "../../api";
export default {
    data() {
        return {
            mediaRecorder: null,
            num: 3,
            chunks: [],
            formData: {
                model: {
                    faceInfo: null,
                    action: '1',
                    livenessType: 'GCT'
                }
            },
            isShow: false
        }
    },
    methods: {
        async to() {
            await this.$store.dispatch('weiwancehngform')
            const form = this.$store.state.formData
            let item = {};
            for (var i in form) {
                item = form[i] || {};
                break;
            }
            console.log(form, 'form')
            console.log(item, 'item')
            if (item.formType == "OCR") {
                this.$router.push('/smrz')
                //跳转OCR
                return;
            } else if (item.formType == "ALIVE") {
                this.$router.push('/huoti')
                return
            } else if (item.formType == "BASIC") {
                this.$router.push('/workInfo')
                //条表单
                return
            } else {
                // 跳产品 
                this.$router.push('/produce')
            }
        },
        startRecording() {
            this.isShow = true
            const video = this.$refs.videoPlayer;
            const stream = video.srcObject;
            const facingMode = stream.getVideoTracks()[0].getSettings().facingMode;
            if (facingMode === 'user') {
                video.style.transform = 'scaleX(-1)';
            }
            const mediaRecorder = new MediaRecorder(stream);

            this.mediaRecorder = mediaRecorder;

            mediaRecorder.ondataavailable = event => {
                this.chunks.push(event.data);
            };
            mediaRecorder.onstop = () => {
                const blob = new Blob(this.chunks, { type: 'video/webm' });
                const reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = async () => {
                    const base64data = reader.result;
                    console.log(base64data)
                    // 处理Base64字符串
                    this.formData.model.faceInfo = base64data
                    //上传活体视屏
                    console.log(this.formData, 'formData')
                    console.log(base64data.length/1024,'1222222222222222222')
                    const res = await huotijiaoyan(jiami(this.formData))
                    console.log(res, 'res')
                    if (jiemi(res.data).status === 0) {
                        console.log(res, 'res222')
                        this.to()
                    }
                };

            };

            mediaRecorder.start();
            this.djs()
            setTimeout(() => {
                this.stopRecording()

            }, 3000);
        },
        stopRecording() {
            const mediaRecorder = this.mediaRecorder;
            mediaRecorder.stop();
        },
        djs() {
            this.num = 3
            let timer = setInterval(() => {
                this.num--
                if (this.num < 0) {
                    clearInterval(timer)
                    this.num = 3,
                        this.isShow = false
                }
            }, 1000)
        }
    },
    created() {
        // 解决视频卡顿
        const constraints = {
            audio: true,
            video: {
                width: { ideal: 640 },
                height: { ideal: 480 },
                frameRate: { ideal: 30 }
            }
        };

        navigator.mediaDevices.getUserMedia(constraints)
            .then(stream => {
                this.$refs.videoPlayer.srcObject = stream;
                this.$refs.videoPlayer.play();
            })
            .catch(error => console.error(error));
    },
    mounted() {
        const video = this.$refs.videoPlayer;

        navigator.mediaDevices.getUserMedia({ video: true })
            .then(stream => {
                video.srcObject = stream;
            })
            .catch(error => {
                console.log(error);
            });
    }
}
</script>
<style lang="less" scoped>
@a: 3.75vw;

.huoti {
    width: 100vw;
    height: (667/@a);
    background-color: #f5f5f5;
    padding-top: (70/@a);
    box-sizing: border-box;

    .video-div {
        width: (300/@a);
        height: (300/@a);



        .video {
            width: 100%;
            height: 100%;
            margin-left: (30/@a);
            border-radius: 50%;
            text-align: center;
            object-fit: cover;
            -webkit-transform: translate3d(0, 0, 0);
            transform: scaleX(-1);
        }
    }


    .main {
        text-align: center;

        .timer {
            width: (70/@a);
            height: (70/@a);
            font-size: (50/@a);
            background-color: #8940ff;
            border-radius: 50%;
            margin-left: (152/@a);
            text-align: center;
            line-height: (70/@a);
            margin-bottom: (20/@a);
        }

        .start {
            font-size: (20/@a);
            width: (200/@a);
            height: (70/@a);
        }

    }

    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (100/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }
}
</style>